<template>
	<div class="menu">
		<ElUpload accept="image/*" :show-file-list="false" :before-upload="file => oper('upload', file)">
			<Upload class="icon-class" v-my-tippy="{ content: '上传', placement: 'left-start' }" />
		</ElUpload>

		<DownloadIcon
			class="icon-class"
			v-my-tippy="{ content: '下载', placement: 'right-start' }"
			@click="oper('download')"
		/>

		<ChangeIcon
			class="icon-class"
			v-my-tippy="{ content: '圆形、矩形裁剪', placement: 'left-start' }"
			@click="oper('switchShape')"
		/>

		<Reload
			class="icon-class"
			v-my-tippy="{ content: '重置', placement: 'right-start' }"
			@click="handCropper('reset')"
		/>

		<ArrowUp
			class="icon-class"
			v-my-tippy="{ content: '上移', placement: 'left-start' }"
			@click="handCropper('move', [0, -10])"
		/>

		<ArrowDown
			class="icon-class"
			v-my-tippy="{ content: '下移', placement: 'right-start' }"
			@click="handCropper('move', [0, 10])"
		/>

		<ArrowLeft
			class="icon-class"
			v-my-tippy="{ content: '左移', placement: 'left-start' }"
			@click="handCropper('move', [-10, 0])"
		/>
		<ArrowRight
			class="icon-class"
			v-my-tippy="{ content: '右移', placement: 'right-start' }"
			@click="handCropper('move', [10, 0])"
		/>

		<ArrowH
			class="icon-class"
			v-my-tippy="{ content: '水平翻转', placement: 'left-start' }"
			@click="() => handCropper('scaleX', -1)"
		/>
		<ArrowV
			class="icon-class"
			v-my-tippy="{ content: '垂直翻转', placement: 'right-start' }"
			@click="() => handCropper('scaleY', -1)"
		/>

		<RotateLeft
			class="icon-class"
			v-my-tippy="{ content: '逆时针旋转', placement: 'left-start' }"
			@click="() => handCropper('rotate', -45)"
		/>
		<RotateRight
			class="icon-class"
			v-my-tippy="{ content: '顺时针旋转', placement: 'right-start' }"
			@click="() => handCropper('rotate', 45)"
		/>

		<SearchPlus
			class="icon-class"
			v-my-tippy="{ content: '放大', placement: 'left-start' }"
			@click="() => handCropper('zoom', 0.1)"
		/>

		<SearchMinus
			class="icon-class"
			v-my-tippy="{ content: '缩小', placement: 'right-start' }"
			@click="() => handCropper('zoom', -0.1)"
		/>
	</div>
</template>

<script setup lang="ts">
import { ElUpload } from "element-plus";
import { directive as vMyTippy } from "vue-tippy";

import {
	Reload,
	Upload,
	ArrowH,
	ArrowV,
	ArrowUp,
	ArrowDown,
	ArrowLeft,
	ChangeIcon,
	ArrowRight,
	RotateLeft,
	SearchPlus,
	RotateRight,
	SearchMinus,
	DownloadIcon,
} from "./svg";
import { EmitState } from "..";
const emit = defineEmits(["otherOper", "cropper", "change"]);

const handCropper = (event: string, arg?: number | Array<number>) => {
	emit("change", event, arg);
};

const oper = (flag: EmitState, file?: File) => {
	emit("otherOper", flag, file);
};
</script>

<style scoped>
.menu {
	display: flex;
	flex-wrap: wrap;
	width: 100px;
	justify-content: space-between;
}
.icon-class {
	padding: 6px;
	height: 30px;
	width: 30px;
	outline: none;
	border-radius: 4px;
	cursor: pointer;
}

.icon-class :hover {
	background-color: rgba(0, 0, 0, 0.06);
}
</style>
